<template>
  <div>
    <el-card class="box-card">
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker size="mini" style="width:100%;" v-model="form.startDate" type="date"
                value-format="yyyyMMdd" placeholder="开始日期" :picker-options="pickerOptionsStart" @change="changeStart">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker style="width:100%;" size="mini" v-model="form.endDate" type="date" value-format="yyyyMMdd"
                placeholder="结束日期" :picker-options="pickerOptionsEnd" @change="changeEnd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="10" class="searchBtnMarginTop" :offset="4">
            <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini"
              @click="ReconsiderationInfoQuery('form')">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      </el-card>
      <el-card>
        <el-row>
            <el-col :md="24" :lg="20">
              <el-button type="primary" size="mini" icon='el-icon-more'  :disabled="currentRow.length!=1" @click="detail">查看详情</el-button>
            </el-col>
          </el-row>
      <el-table :data="tableData" border highlight-current-row class="tableMarginTop"  @selection-change="handleCurrentChange">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column prop="TASKID" align="center" label="任务ID"></el-table-column>
        <el-table-column prop="APPEALSTATUS" align="center" label="申诉状态"></el-table-column>
        <el-table-column prop="APPEALCAUSE" align="center" label="申诉原因"></el-table-column>
        <el-table-column prop="RECONSIDER" align="center" label="复议人"></el-table-column>
        <el-table-column prop="RECONSIDATE" align="center" label="复议日期"></el-table-column>
        <el-table-column prop="RECONSIDSCORE" align="center" label="复议得分"></el-table-column>

        <!-- <el-table-column prop="OPERAWORKDATE" align="center" label="操作日期"></el-table-column>
        <el-table-column prop="BATCHNO" align="center" label="批次号"></el-table-column>
        <el-table-column prop="BATCHDATE" align="center" label="批次日期"></el-table-column>
        <el-table-column prop="BEGINTIME" align="center" label="会话开始时间"></el-table-column>
        <el-table-column prop="ENDTIME" align="center" label="会话结束时间"></el-table-column>
        <el-table-column prop="SESSIONTIME" align="center" label="会话时长"></el-table-column>
        <el-table-column prop="CHANNELTYPE" align="center" label="渠道" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="BUSINESSTYPE" align="center" label="业务类型" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="MEDIATYPE" align="center" label="多媒体类型" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="CUSTOMER" align="center" label="客户姓名"></el-table-column>
        <el-table-column prop="CUSTOMLEVEL" align="center" label="客户等级" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="TELNUMBER" align="center" label="客户手机号"></el-table-column>
        <el-table-column prop="CUSTOMIDTYPE" align="center" label="客户证件类型" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="CUSTOMIDNO" align="center" label="客户证件号"></el-table-column>
        <el-table-column prop="CALLTYPE" align="center" label="呼叫类型" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="AREA" align="center" label="运营地区"></el-table-column>
        <el-table-column prop="AGENTID" align="center" label="坐席工号"></el-table-column>
        <el-table-column prop="AGENTNAME" align="center" label="坐席名"></el-table-column>
        <el-table-column prop="AGENTLEVEL" align="center" label="坐席等级" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="EXTNO" align="center" label="分机号"></el-table-column>
        <el-table-column prop="TEAM" align="center" label="班组"></el-table-column>
        <el-table-column prop="SKILL" align="center" label="技能"></el-table-column>
        <el-table-column prop="BRNO" align="center" label="机构"></el-table-column>
        <el-table-column prop="COLLECTFLAG" align="center" label="采集方式" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="VALIDFLAG" align="center" label="有效标识" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="FILEPATH" align="center" label="音视频文件路径"></el-table-column>
        <el-table-column prop="SAMPLFLAG" align="center" label="抽样方式" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="SAMPLER" align="center" label="抽样人员"></el-table-column>
        <el-table-column prop="QUALITER" align="center" label="质检员"></el-table-column>
        <el-table-column prop="TASKFLAG" align="center" label="任务方式" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="TASKSTATUS" align="center" label="任务状态" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="SCORE" align="center" label="质检总得分"></el-table-column>
        <el-table-column prop="APPEALFLAG" align="center" label="申诉标识"></el-table-column> -->
        
        
        
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button type="warning" size="mini" icon="el-icon-s-promotion" @click="Reconsideration(scope.row)">评分复议
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col>
          <el-pagination style="text-align: right; margin-top:20px;" :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" @size-change="handleInSizeChange" @current-change="handleInCurrentChange"
            :current-page="currpage" background layout="total,sizes, prev, pager, next, jumper" :total="tableTotal">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <component :is="dialogList.reconsiderationDialog" :option="reconsiderationOptions"
      @refreshTable="ReconsiderationInfoQuery"></component>
      <component :is="dialogList.detailDialog" :option="detailOptions"></component>
  </div>
</template>
<script>
  import queyData from "@/message/QCManage/QCReconsideration/qcReconsideration";
  import request from "@/common/utils/requestQC";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import requestWFM from "@/common/utils/requestWFM";
  import dictionary from "@/message/wfm/baseData/dictionaryManage/dictionaryQuery";
  import toolBox from "@/common/utils/toolBox";
  import matchTemplate from '@/message/QCManage/QCScore/matchTemplate';
  import reconsiderationDialog from "./component/reconsiderationDialog";
   import detailDialog from "./component/detailDialog";

  export default {
    data() {
      return {
        dialogList: {
          detailDialog,
          reconsiderationDialog
        },
        detailOptions: {
          isShow: false,
          title: "",
          row: {}
        },
        loading: false,
        tableData: [],
        tableTotal: 1,
        pageSize: getGlobalParams.get("PageSize"),
        currpage: 1,
        currentRow: [],
        reconsiderationOptions: {
          isShow: false,
          title: '',
          row: {},
          flag: ''
        },
        pickerOptionsStart: {
          disabledDate: time => {
            // return time.getTime() < Date.now()
          }
        },
        pickerOptionsEnd: {
          disabledDate: time => {
            // return time.getTime() < Date.now()
          }
        },
        form: {
          startDate: "",
          endDate: ""
        },
        channelOption: [], //渠道类型
        typeOption: []
      };
    },
    created() {
      this.form.startDate = toolBox.getCurrentMonthFirstDay();
      this.changeStart();
      this.form.endDate = toolBox.getCurrentMonthLastDay();
      this.changeEnd();
    },
    mounted() {
      console.log(
        "form---" +
        this.form.startDate +
        "---" +
        this.form.endDate
      );
      this.dictionaryQuery("CHANNELTYPE").then(
        value => (this.channelOption = value)
      );
      this.dictionaryQuery("BUSITYPE").then(value => (this.typeOption = value));
      this.ReconsiderationInfoQuery();
    },
    methods: {
      async dictionaryQuery(type) {
        let resBody = new dictionary();
        resBody.data.FIELDCODE = type;
        resBody.data.CurrPage = 1;
        resBody.data.PageRowNum = 400;
        let response = await requestWFM(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          return response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" +
              response.SYS_HEAD.ReturnCode +
              "，错误信息：" +
              response.SYS_HEAD.ReturnMessage
          });
        }
      },
      async ReconsiderationInfoQuery() {
        let resBody = new queyData();
        resBody.data.BEGINDATE = this.form.startDate;
        resBody.data.ENDDATE = this.form.endDate;
        resBody.data.PageFlag = 4;
        resBody.data.CurrPage = 1;
        resBody.data.PageRowNum = 10;
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          console.log("success!!!")
          this.tableData = response.BODY.RSPSTRUCT;
          this.tableTotal = this.tableData.TotalRowNum;
          this.currpage = this.tableData.NowPageNum;
        } else {
          console.log("fail!!!")
          this.$message({
            type: "error",
            message: "请求失败，错误码:" +
              response.SYS_HEAD.ReturnCode +
              "，错误信息：" +
              response.SYS_HEAD.ReturnMessage
          });
        }
      },
      //前端分页
      handleInCurrentChange(val) {
        this.currpage = val;
        // console.log(`当前页: ${val}`);
        this.ReconsiderationInfoQuery();
      },
      handleInSizeChange(val) {
        this.pageSize = val;
        this.ReconsiderationInfoQuery();
      },
      dataFormat(row, column) {
        //枚举设备形式
        if (column.property == "CHANNELTYPE")
          return this.findName(this.channelOption, row[column.property]);
        if (column.property == "BUSINESSTYPE")
          return this.findName(this.typeOption, row[column.property]);
      },
      findName(arr, val) {
        let data = arr.filter(item => {
          return item.FIELDKEY == val;
        });
        if (data.length) return data[0].FIELDKEY + " - " + data[0].FIELDVALUE;
      },

      changeStart() {
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: time => {
            if (this.form.startDate) {
              return (
                time.getTime() <
                Date.parse(
                  this.form.startDate.slice(0, 4) +
                  "-" +
                  this.form.startDate.slice(4, 6) +
                  "-" +
                  this.form.startDate.slice(6, 8)
                ) -
                8.64e7
              );
            } else {
              // return time.getTime() < Date.now();
            }
          }
        });
      },
      changeEnd() {
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: time => {
            if (this.form.endDate) {
              return (
                time.getTime() >
                Date.parse(
                  this.form.endDate.slice(0, 4) +
                  "-" +
                  this.form.endDate.slice(4, 6) +
                  "-" +
                  this.form.endDate.slice(6, 8)
                )
              );
            } else {
              // return time.getTime() < Date.now();
            }
          }
        });
      },
      async Reconsideration(row) {
        let resBody = new matchTemplate()
        resBody.data.CHANNELTYPE = row.CHANNELTYPE
        resBody.data.BUSINESSTYPE = row.BUSINESSTYPE
        resBody.data.TRANSCODE = row.TRANSCODE == undefined ? '' : row.TRANSCODE
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          console.log('----' + (JSON.stringify(response.BODY)))
          this.reconsiderationOptions.response = response.BODY
          this.reconsiderationOptions.title = '复议评分'
          this.reconsiderationOptions.isShow = true
          this.reconsiderationOptions.row = row
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      detail(){
        this.detailOptions.row = this.currentRow;
        this.detailOptions.title = '复议详情';
        this.detailOptions.isShow = true;
      }
    }
  };

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
